import React, { useEffect } from 'react';
import { Form, Input, Switch, Button, message, Card, Row, Col } from 'antd';
import { getUnit, updateUnit, createUnit } from '../../services/unit';
import { useNavigate } from 'react-router-dom';
import {
    BugOutlined,
    BranchesOutlined,
    DashboardOutlined,
    DatabaseOutlined,
    FileZipOutlined,
    SettingOutlined,
    SaveOutlined,
    ReloadOutlined,
    ArrowLeftOutlined,
    CheckCircleOutlined,
    InfoCircleOutlined,
    CodeOutlined,
    FilterOutlined
} from '@ant-design/icons';

interface UnitConfigPageProps {
    mode?: 'create' | 'edit';
    unitId?: string;
    onSuccess?: () => void;
}

const UnitConfigPage: React.FC<UnitConfigPageProps> = ({ mode = 'create', unitId, onSuccess }) => {
    const [form] = Form.useForm();
    const navigate = useNavigate();

    // PMD配置模板
    const setPmdTemplate = (templateType: 'java' | 'frontend' | 'general') => {
        const templates = {
            java: {
                pmdExcludeDirs: 'target,build,dist,node_modules,.git,.svn,.idea,.vscode,bin,obj',
                pmdExcludeFiles: '**/test/**,**/tests/**,**/spec/**,**/*Test.java,**/*Tests.java,**/*Spec.java',
                pmdExcludeExtensions: 'class,jar,war,ear,zip,rar,tar,gz,bz2,7z,exe,dll,so,dylib,a,o,obj,pyc,pyo'
            },
            frontend: {
                pmdExcludeDirs: 'node_modules,dist,build,.git,.svn,.idea,.vscode,coverage',
                pmdExcludeFiles: '**/test/**,**/tests/**,**/spec/**,**/*.test.js,**/*.test.ts,**/*.spec.js,**/*.spec.ts',
                pmdExcludeExtensions: 'js.map,ts.map,css.map,min.js,min.css,bundle.js,chunk.js'
            },
            general: {
                pmdExcludeDirs: 'target,build,dist,node_modules,.git,.svn,.hg,__pycache__,.idea,.vscode,bin,obj',
                pmdExcludeFiles: '**/test/**,**/tests/**,**/spec/**,**/*Test.*,**/*Tests.*,**/*Spec.*',
                pmdExcludeExtensions: 'class,jar,war,ear,zip,rar,tar,gz,bz2,7z,exe,dll,so,dylib,a,o,obj,pyc,pyo'
            }
        };

        const template = templates[templateType];
        form.setFieldsValue(template);
        message.success(`已应用${templateType === 'java' ? 'Java' : templateType === 'frontend' ? '前端' : '通用'}项目模板`);
    };

    useEffect(() => {
        if (mode === 'edit' && unitId) {
            getUnit(unitId).then(res => {
                if (res && res.data) {
                    const data = { ...res.data };
                    // 字符串字段为 null/undefined 时转为空串
                    [
                        'unitType', 'ownTeam', 'ownCenter', 'defaultBranch', 'artifactoryPath',
                        'packageRuleReg', 'packageRuleExclude', 'jarNameFilter', 'jarExcludeFilter',
                        'gitRepoId', 'pmdExcludeDirs', 'pmdExcludeFiles', 'pmdExcludeExtensions'
                    ].forEach(key => { if (data[key] == null) data[key] = ''; });
                    // 布尔字段为 null/undefined 时转为 false
                    ['saTask', 'gitTask', 'apmTask', 'jarTask', 'jacgTask', 'dbTask'].forEach(key => { if (data[key] == null) data[key] = false; });
                    console.log('setFieldsValue', data);
                    form.setFieldsValue(data);
                }
            });
        } else if (mode === 'create') {
            // 新建模式下设置默认值
            form.setFieldsValue({
                jarTask: true,  // 默认开启静态分析
                gitTask: true,  // 默认开启Git分析
                apmTask: false,
                saTask: false,
                jacgTask: false,  // 默认关闭JACG分析
                dbTask: false,  // 默认关闭DB分析
                // 包过滤规则默认为空（不限制）
                packageRuleReg: '',
                packageRuleExclude: '',
                // JAR过滤规则默认为空
                jarNameFilter: '',
                jarExcludeFilter: ''
            });
        }
    }, [mode, unitId, form]);

    const handleFinish = async (values: any) => {
        try {
            if (mode === 'edit') {
                await updateUnit(values);
                message.success('更新成功');
            } else {
                await createUnit(values);
                message.success('新建成功');
            }
            if (onSuccess) onSuccess();
            navigate('/units', { replace: true });
        } catch (e: any) {
            message.error(e?.response?.data?.msg || '操作失败');
        }
    };

    return (
        <div style={{
            height: '100vh',
            background: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
            overflow: 'auto',
            paddingBottom: '40px'
        }}>
            {/* 现代化页面头部 */}
            <div style={{
                background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
                boxShadow: '0 4px 24px rgba(0, 0, 0, 0.06)',
                border: '1px solid rgba(255, 255, 255, 0.8)',
                marginBottom: '24px'
            }}>
                <div style={{ padding: '32px 40px' }}>
                    {/* 页面标题区域 */}
                    <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        marginBottom: '24px'
                    }}>
                        <div style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: '20px'
                        }}>
                            <div style={{
                                width: '56px',
                                height: '56px',
                                borderRadius: '16px',
                                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                boxShadow: '0 12px 28px rgba(102, 126, 234, 0.4)'
                            }}>
                                <SettingOutlined style={{
                                    fontSize: '28px',
                                    color: '#fff'
                                }} />
                            </div>
                            <div>
                                <h1 style={{
                                    margin: 0,
                                    fontSize: '32px',
                                    fontWeight: '700',
                                    color: '#1e293b',
                                    lineHeight: '1.2',
                                    marginBottom: '6px'
                                }}>
                                    {mode === 'create' ? '新建单元配置' : '编辑单元配置'}
                                </h1>
                                <p style={{
                                    margin: 0,
                                    fontSize: '16px',
                                    color: '#64748b',
                                    fontWeight: '500'
                                }}>
                                    {mode === 'create' ?
                                        '创建新的代码分析单元，配置扫描参数和过滤规则' :
                                        `正在编辑单元: ${unitId || '未知单元'}`
                                    }
                                </p>
                            </div>
                        </div>

                        {/* 操作按钮区域 */}
                        <div style={{
                            display: 'flex',
                            gap: '12px',
                            alignItems: 'center'
                        }}>
                            <Button
                                type="text"
                                size="large"
                                icon={<ArrowLeftOutlined />}
                                onClick={() => navigate('/units')}
                                style={{
                                    borderRadius: '12px',
                                    height: '48px',
                                    padding: '0 20px',
                                    fontSize: '14px',
                                    fontWeight: '600',
                                    color: '#64748b'
                                }}
                            >
                                返回列表
                            </Button>

                            <Button
                                type="default"
                                size="large"
                                icon={<ReloadOutlined />}
                                onClick={() => form.resetFields()}
                                style={{
                                    borderRadius: '12px',
                                    height: '48px',
                                    padding: '0 20px',
                                    fontSize: '14px',
                                    fontWeight: '600',
                                    border: '1px solid #e2e8f0',
                                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)'
                                }}
                            >
                                重置
                            </Button>

                            <Button
                                type="primary"
                                size="large"
                                htmlType="submit"
                                form="unit-config-form"
                                icon={<SaveOutlined />}
                                style={{
                                    borderRadius: '12px',
                                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                                    border: 'none',
                                    height: '48px',
                                    padding: '0 24px',
                                    fontSize: '14px',
                                    fontWeight: '600',
                                    boxShadow: '0 4px 16px rgba(102, 126, 234, 0.3)'
                                }}
                            >
                                {mode === 'create' ? '创建单元' : '保存修改'}
                            </Button>
                        </div>
                    </div>
                </div>
            </div>

            {/* 表单内容区域 */}
            <div style={{ padding: '0 40px 40px' }}>
                <Form
                    id="unit-config-form"
                    layout="vertical"
                    form={form}
                    onFinish={handleFinish}
                    style={{ maxWidth: '100%' }}
                >
                    {/* 基本信息卡片 - 紧凑设计 */}
                    <Card
                        style={{
                            marginBottom: '24px',
                            borderRadius: '16px',
                            boxShadow: '0 2px 12px rgba(0, 0, 0, 0.04)',
                            border: '1px solid rgba(255, 255, 255, 0.8)',
                            overflow: 'hidden'
                        }}
                    >
                        {/* 卡片头部装饰条 */}
                        <div style={{
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            width: '100%',
                            height: '4px',
                            background: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)'
                        }} />

                        <div style={{ padding: '20px 24px' }}>
                            {/* 卡片标题 */}
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                gap: '12px',
                                marginBottom: '20px'
                            }}>
                                <div style={{
                                    width: '32px',
                                    height: '32px',
                                    borderRadius: '8px',
                                    background: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    boxShadow: '0 4px 12px rgba(59, 130, 246, 0.2)'
                                }}>
                                    <InfoCircleOutlined style={{
                                        fontSize: '16px',
                                        color: '#fff'
                                    }} />
                                </div>
                                <div>
                                    <h2 style={{
                                        margin: 0,
                                        fontSize: '18px',
                                        fontWeight: '600',
                                        color: '#1e293b',
                                        lineHeight: '1.2'
                                    }}>
                                        基本信息
                                    </h2>
                                    <p style={{
                                        margin: '2px 0 0 0',
                                        fontSize: '12px',
                                        color: '#64748b',
                                        fontWeight: '500'
                                    }}>
                                        配置单元的基础属性和标识信息
                                    </p>
                                </div>
                            </div>

                            {/* 表单字段网格布局 - 紧凑设计 */}
                            <Row gutter={[16, 12]}>
                                <Col span={8}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '13px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                单元ID
                                            </span>
                                        }
                                        name="unitId"
                                        style={{ marginBottom: '12px' }}
                                    >
                                        <Input
                                            disabled
                                            size="small"
                                            style={{
                                                height: '32px',
                                                borderRadius: '8px',
                                                fontSize: '13px',
                                                fontWeight: '500',
                                                background: '#f8fafc',
                                                border: '1px solid #e2e8f0',
                                                color: '#64748b'
                                            }}
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '13px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                应用ID
                                            </span>
                                        }
                                        name="appId"
                                        style={{ marginBottom: '12px' }}
                                    >
                                        <Input
                                            disabled
                                            size="small"
                                            maxLength={6}
                                            style={{
                                                height: '32px',
                                                borderRadius: '8px',
                                                fontSize: '13px',
                                                fontWeight: '500',
                                                background: '#f8fafc',
                                                border: '1px solid #e2e8f0',
                                                color: '#64748b'
                                            }}
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '13px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                单元类型
                                            </span>
                                        }
                                        name="unitType"
                                        style={{ marginBottom: '12px' }}
                                    >
                                        <Input
                                            size="small"
                                            style={{
                                                height: '32px',
                                                borderRadius: '8px',
                                                fontSize: '13px',
                                                fontWeight: '500',
                                                border: '1px solid #d1d5db',
                                                transition: 'all 0.2s ease'
                                            }}
                                            placeholder="SpringBoot应用"
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={24}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '13px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                Git仓库地址
                                            </span>
                                        }
                                        name="gitRepoUrl"
                                        style={{ marginBottom: '12px' }}
                                    >
                                        <Input
                                            disabled
                                            size="small"
                                            style={{
                                                height: '32px',
                                                borderRadius: '8px',
                                                fontSize: '13px',
                                                fontWeight: '500',
                                                background: '#f8fafc',
                                                border: '1px solid #e2e8f0',
                                                color: '#64748b'
                                            }}
                                            placeholder="Git仓库的完整URL地址"
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '13px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                归属团队
                                            </span>
                                        }
                                        name="ownTeam"
                                        style={{ marginBottom: '12px' }}
                                    >
                                        <Input
                                            size="small"
                                            style={{
                                                height: '32px',
                                                borderRadius: '8px',
                                                fontSize: '13px',
                                                fontWeight: '500',
                                                border: '1px solid #d1d5db',
                                                transition: 'all 0.2s ease'
                                            }}
                                            placeholder="团队名称"
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '13px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                归属中心
                                            </span>
                                        }
                                        name="ownCenter"
                                        style={{ marginBottom: '12px' }}
                                    >
                                        <Input
                                            size="small"
                                            style={{
                                                height: '32px',
                                                borderRadius: '8px',
                                                fontSize: '13px',
                                                fontWeight: '500',
                                                border: '1px solid #d1d5db',
                                                transition: 'all 0.2s ease'
                                            }}
                                            placeholder="中心名称"
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '13px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                默认分支
                                            </span>
                                        }
                                        name="defaultBranch"
                                        style={{ marginBottom: '12px' }}
                                    >
                                        <Input
                                            size="small"
                                            style={{
                                                height: '32px',
                                                borderRadius: '8px',
                                                fontSize: '13px',
                                                fontWeight: '500',
                                                border: '1px solid #d1d5db',
                                                transition: 'all 0.2s ease'
                                            }}
                                            placeholder="master"
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={24}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '13px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                制品路径
                                            </span>
                                        }
                                        name="artifactoryPath"
                                        style={{ marginBottom: '4px' }}
                                    >
                                        <Input
                                            size="small"
                                            style={{
                                                height: '32px',
                                                borderRadius: '8px',
                                                fontSize: '13px',
                                                fontWeight: '500',
                                                border: '1px solid #d1d5db',
                                                transition: 'all 0.2s ease'
                                            }}
                                            placeholder="制品仓库JAR包路径"
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>
                        </div>
                    </Card>
                    {/* 功能开关卡片 - 紧凑设计 */}
                    <Card
                        style={{
                            marginBottom: '24px',
                            borderRadius: '16px',
                            boxShadow: '0 2px 12px rgba(0, 0, 0, 0.04)',
                            border: '1px solid rgba(255, 255, 255, 0.8)',
                            overflow: 'hidden'
                        }}
                    >
                        {/* 卡片头部装饰条 */}
                        <div style={{
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            width: '100%',
                            height: '4px',
                            background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
                        }} />

                        <div style={{ padding: '20px 24px' }}>
                            {/* 卡片标题 - 紧凑版 */}
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                gap: '12px',
                                marginBottom: '16px'
                            }}>
                                <div style={{
                                    width: '32px',
                                    height: '32px',
                                    borderRadius: '8px',
                                    background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    boxShadow: '0 4px 12px rgba(16, 185, 129, 0.2)'
                                }}>
                                    <CheckCircleOutlined style={{
                                        fontSize: '16px',
                                        color: '#fff'
                                    }} />
                                </div>
                                <div>
                                    <h2 style={{
                                        margin: 0,
                                        fontSize: '18px',
                                        fontWeight: '600',
                                        color: '#1e293b',
                                        lineHeight: '1.2'
                                    }}>
                                        功能开关
                                    </h2>
                                    <p style={{
                                        margin: '2px 0 0 0',
                                        fontSize: '12px',
                                        color: '#64748b',
                                        fontWeight: '500'
                                    }}>
                                        启用或禁用不同类型的代码分析任务
                                    </p>
                                </div>
                            </div>

                            {/* 功能开关紧凑型一行布局 */}
                            <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
                                {/* 静态分析开关 */}
                                <div style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between',
                                    padding: '8px 12px',
                                    background: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
                                    borderRadius: '8px',
                                    border: '1px solid #e2e8f0',
                                    transition: 'all 0.2s ease',
                                    flex: '1',
                                    minWidth: '140px'
                                }}>
                                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <div style={{
                                            width: '20px',
                                            height: '20px',
                                            borderRadius: '4px',
                                            background: 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)',
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            boxShadow: '0 2px 4px rgba(139, 92, 246, 0.2)'
                                        }}>
                                            <FileZipOutlined style={{ fontSize: '10px', color: '#fff' }} />
                                        </div>
                                        <span style={{ fontSize: '12px', fontWeight: '600', color: '#1e293b' }}>
                                            静态分析
                                        </span>
                                    </div>
                                    <Form.Item name="jarTask" valuePropName="checked" style={{ margin: 0 }}>
                                        <Switch size="small" checkedChildren="开" unCheckedChildren="关" />
                                    </Form.Item>
                                </div>

                                {/* Git分析开关 */}
                                <div style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between',
                                    padding: '8px 12px',
                                    background: 'linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%)',
                                    borderRadius: '8px',
                                    border: '1px solid #bbf7d0',
                                    transition: 'all 0.2s ease',
                                    flex: '1',
                                    minWidth: '140px'
                                }}>
                                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <div style={{
                                            width: '20px',
                                            height: '20px',
                                            borderRadius: '4px',
                                            background: 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            boxShadow: '0 2px 4px rgba(34, 197, 94, 0.2)'
                                        }}>
                                            <BranchesOutlined style={{ fontSize: '10px', color: '#fff' }} />
                                        </div>
                                        <span style={{ fontSize: '12px', fontWeight: '600', color: '#1e293b' }}>
                                            Git分析
                                        </span>
                                    </div>
                                    <Form.Item name="gitTask" valuePropName="checked" style={{ margin: 0 }}>
                                        <Switch size="small" checkedChildren="开" unCheckedChildren="关" />
                                    </Form.Item>
                                </div>

                                {/* APM分析开关 */}
                                <div style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between',
                                    padding: '8px 12px',
                                    background: 'linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)',
                                    borderRadius: '8px',
                                    border: '1px solid #fed7aa',
                                    transition: 'all 0.2s ease',
                                    flex: '1',
                                    minWidth: '140px'
                                }}>
                                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <div style={{
                                            width: '20px',
                                            height: '20px',
                                            borderRadius: '4px',
                                            background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            boxShadow: '0 2px 4px rgba(245, 158, 11, 0.2)'
                                        }}>
                                            <DashboardOutlined style={{ fontSize: '10px', color: '#fff' }} />
                                        </div>
                                        <span style={{ fontSize: '12px', fontWeight: '600', color: '#1e293b' }}>
                                            APM分析
                                        </span>
                                    </div>
                                    <Form.Item name="apmTask" valuePropName="checked" style={{ margin: 0 }}>
                                        <Switch size="small" checkedChildren="开" unCheckedChildren="关" />
                                    </Form.Item>
                                </div>

                                {/* SA分析开关 */}
                                <div style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between',
                                    padding: '8px 12px',
                                    background: 'linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%)',
                                    borderRadius: '8px',
                                    border: '1px solid #bfdbfe',
                                    transition: 'all 0.2s ease',
                                    flex: '1',
                                    minWidth: '140px'
                                }}>
                                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <div style={{
                                            width: '20px',
                                            height: '20px',
                                            borderRadius: '4px',
                                            background: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            boxShadow: '0 2px 4px rgba(59, 130, 246, 0.2)'
                                        }}>
                                            <BugOutlined style={{ fontSize: '10px', color: '#fff' }} />
                                        </div>
                                        <span style={{ fontSize: '12px', fontWeight: '600', color: '#1e293b' }}>
                                            SA分析
                                        </span>
                                    </div>
                                    <Form.Item name="saTask" valuePropName="checked" style={{ margin: 0 }}>
                                        <Switch size="small" checkedChildren="开" unCheckedChildren="关" />
                                    </Form.Item>
                                </div>

                                {/* JACG调用图分析开关 */}
                                <div style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between',
                                    padding: '8px 12px',
                                    background: 'linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%)',
                                    borderRadius: '8px',
                                    border: '1px solid #fecaca',
                                    transition: 'all 0.2s ease',
                                    flex: '1',
                                    minWidth: '140px'
                                }}>
                                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <div style={{
                                            width: '20px',
                                            height: '20px',
                                            borderRadius: '4px',
                                            background: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            boxShadow: '0 2px 4px rgba(239, 68, 68, 0.2)'
                                        }}>
                                            <CodeOutlined style={{ fontSize: '10px', color: '#fff' }} />
                                        </div>
                                        <span style={{ fontSize: '12px', fontWeight: '600', color: '#1e293b' }}>
                                            JACG调用图
                                        </span>
                                    </div>
                                    <Form.Item name="jacgTask" valuePropName="checked" style={{ margin: 0 }}>
                                        <Switch size="small" checkedChildren="开" unCheckedChildren="关" />
                                    </Form.Item>
                                </div>

                                {/* DB数据库分析开关 */}
                                <div style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between',
                                    padding: '8px 12px',
                                    background: 'linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%)',
                                    borderRadius: '8px',
                                    border: '1px solid #bae6fd',
                                    transition: 'all 0.2s ease',
                                    flex: '1',
                                    minWidth: '140px'
                                }}>
                                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <div style={{
                                            width: '20px',
                                            height: '20px',
                                            borderRadius: '4px',
                                            background: 'linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%)',
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            boxShadow: '0 2px 4px rgba(14, 165, 233, 0.2)'
                                        }}>
                                            <DatabaseOutlined style={{ fontSize: '10px', color: '#fff' }} />
                                        </div>
                                        <span style={{ fontSize: '12px', fontWeight: '600', color: '#1e293b' }}>
                                            DB数据库
                                        </span>
                                    </div>
                                    <Form.Item name="dbTask" valuePropName="checked" style={{ margin: 0 }}>
                                        <Switch size="small" checkedChildren="开" unCheckedChildren="关" />
                                    </Form.Item>
                                </div>
                            </div>
                        </div>
                    </Card>
                    {/* 过滤条件卡片 - 紧凑设计 */}
                    <Card
                        style={{
                            marginBottom: '24px',
                            borderRadius: '16px',
                            boxShadow: '0 2px 12px rgba(0, 0, 0, 0.04)',
                            border: '1px solid rgba(255, 255, 255, 0.8)',
                            overflow: 'hidden'
                        }}
                    >
                        {/* 卡片头部装饰条 */}
                        <div style={{
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            width: '100%',
                            height: '4px',
                            background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'
                        }} />

                        <div style={{ padding: '20px 24px' }}>
                            {/* 卡片标题 - 紧凑版 */}
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                gap: '12px',
                                marginBottom: '16px'
                            }}>
                                <div style={{
                                    width: '32px',
                                    height: '32px',
                                    borderRadius: '8px',
                                    background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    boxShadow: '0 4px 12px rgba(245, 158, 11, 0.2)'
                                }}>
                                    <FilterOutlined style={{
                                        fontSize: '16px',
                                        color: '#fff'
                                    }} />
                                </div>
                                <div>
                                    <h2 style={{
                                        margin: 0,
                                        fontSize: '18px',
                                        fontWeight: '600',
                                        color: '#1e293b',
                                        lineHeight: '1.2'
                                    }}>
                                        过滤规则配置
                                    </h2>
                                    <p style={{
                                        margin: '2px 0 0 0',
                                        fontSize: '12px',
                                        color: '#64748b',
                                        fontWeight: '500'
                                    }}>
                                        配置包过滤和JAR过滤规则，控制代码分析范围
                                    </p>
                                </div>
                            </div>

                            {/* 包过滤规则 */}
                            <Row gutter={[16, 12]}>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '13px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                包名白名单（Include）
                                            </span>
                                        }
                                        name="packageRuleReg"
                                        tooltip="指定要分析的包，支持前缀匹配（com.example）、关键词匹配（*devops*）、后缀匹配（*Service），多个用逗号分隔"
                                        style={{ marginBottom: '12px' }}
                                    >
                                        <Input.TextArea
                                            rows={2}
                                            style={{
                                                borderRadius: '8px',
                                                fontSize: '12px',
                                                fontFamily: 'Monaco, "SF Mono", Consolas, monospace',
                                                border: '1px solid #d1d5db',
                                                transition: 'all 0.2s ease'
                                            }}
                                            placeholder="例: com.example,org.myproject 或 *devops*"
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '13px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                包名黑名单（Exclude）
                                            </span>
                                        }
                                        name="packageRuleExclude"
                                        tooltip="指定要排除的包，支持前缀匹配和通配符，多个用逗号分隔"
                                        style={{ marginBottom: '12px' }}
                                    >
                                        <Input.TextArea
                                            rows={2}
                                            style={{
                                                borderRadius: '8px',
                                                fontSize: '12px',
                                                fontFamily: 'Monaco, "SF Mono", Consolas, monospace',
                                                border: '1px solid #d1d5db',
                                                transition: 'all 0.2s ease'
                                            }}
                                            placeholder="例: *test*,*mock*,com.example.legacy"
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>

                            {/* JAR过滤规则 */}
                            <Row gutter={[16, 12]} style={{ marginTop: '12px' }}>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '13px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                JAR文件白名单
                                            </span>
                                        }
                                        name="jarNameFilter"
                                        tooltip="指定要分析的JAR文件名关键词，多个用逗号分隔"
                                        style={{ marginBottom: '12px' }}
                                    >
                                        <Input
                                            size="small"
                                            style={{
                                                height: '32px',
                                                borderRadius: '8px',
                                                fontSize: '12px',
                                                fontFamily: 'Monaco, "SF Mono", Consolas, monospace',
                                                border: '1px solid #d1d5db',
                                                transition: 'all 0.2s ease'
                                            }}
                                            placeholder="例: myapp-,-service-"
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '13px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                JAR文件黑名单
                                            </span>
                                        }
                                        name="jarExcludeFilter"
                                        tooltip="指定要排除的JAR文件名关键词，多个用逗号分隔"
                                        style={{ marginBottom: '12px' }}
                                    >
                                        <Input
                                            size="small"
                                            style={{
                                                height: '32px',
                                                borderRadius: '8px',
                                                fontSize: '12px',
                                                fontFamily: 'Monaco, "SF Mono", Consolas, monospace',
                                                border: '1px solid #d1d5db',
                                                transition: 'all 0.2s ease'
                                            }}
                                            placeholder="例: -test-,-sources-,-javadoc-"
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>
                        </div>
                    </Card>

                    {/* PMD扫描配置 */}
                    <Card
                        style={{
                            marginTop: '24px',
                            borderRadius: '16px',
                            boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
                            border: '1px solid rgba(239, 68, 68, 0.1)',
                            background: 'linear-gradient(135deg, #ffffff 0%, #fefefe 100%)'
                        }}
                    >
                        <div style={{ padding: '24px' }}>
                            {/* 标题区域 */}
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                gap: '12px',
                                marginBottom: '24px'
                            }}>
                                <div style={{
                                    width: '40px',
                                    height: '40px',
                                    borderRadius: '10px',
                                    background: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    boxShadow: '0 4px 12px rgba(239, 68, 68, 0.2)'
                                }}>
                                    <BugOutlined style={{
                                        fontSize: '16px',
                                        color: '#fff'
                                    }} />
                                </div>
                                <div>
                                    <h2 style={{
                                        margin: 0,
                                        fontSize: '18px',
                                        fontWeight: '600',
                                        color: '#1e293b',
                                        lineHeight: '1.2'
                                    }}>
                                        PMD扫描配置
                                    </h2>
                                    <p style={{
                                        margin: '2px 0 0 0',
                                        fontSize: '12px',
                                        color: '#64748b',
                                        fontWeight: '500'
                                    }}>
                                        配置代码质量分析工具的排除规则和扫描参数
                                    </p>
                                </div>
                            </div>

                            {/* PMD配置表单 */}
                            <Row gutter={[24, 16]}>
                                <Col span={24}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '14px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                排除目录
                                            </span>
                                        }
                                        name="pmdExcludeDirs"
                                        tooltip="用逗号分割的目录列表，如：target,build,dist,node_modules"
                                        style={{ marginBottom: '16px' }}
                                    >
                                        <Input.TextArea
                                            rows={2}
                                            style={{
                                                borderRadius: '8px',
                                                fontSize: '13px',
                                                fontFamily: 'Monaco, "SF Mono", Consolas, monospace',
                                                border: '1px solid #d1d5db',
                                                transition: 'all 0.2s ease',
                                                background: '#fafafa'
                                            }}
                                            placeholder="target,build,dist,node_modules,.git,.svn,.idea,.vscode"
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>

                            <Row gutter={[24, 16]}>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '14px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                排除文件模式
                                            </span>
                                        }
                                        name="pmdExcludeFiles"
                                        tooltip="用逗号分割的文件模式，支持通配符"
                                        style={{ marginBottom: '16px' }}
                                    >
                                        <Input.TextArea
                                            rows={3}
                                            style={{
                                                borderRadius: '8px',
                                                fontSize: '13px',
                                                fontFamily: 'Monaco, "SF Mono", Consolas, monospace',
                                                border: '1px solid #d1d5db',
                                                transition: 'all 0.2s ease',
                                                background: '#fafafa'
                                            }}
                                            placeholder="**/test/**,**/tests/**,**/spec/**,**/*Test.java,**/*Tests.java"
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span style={{
                                                fontSize: '14px',
                                                fontWeight: '600',
                                                color: '#374151'
                                            }}>
                                                排除文件扩展名
                                            </span>
                                        }
                                        name="pmdExcludeExtensions"
                                        tooltip="用逗号分割的文件扩展名列表"
                                        style={{ marginBottom: '16px' }}
                                    >
                                        <Input.TextArea
                                            rows={3}
                                            style={{
                                                borderRadius: '8px',
                                                fontSize: '13px',
                                                fontFamily: 'Monaco, "SF Mono", Consolas, monospace',
                                                border: '1px solid #d1d5db',
                                                transition: 'all 0.2s ease',
                                                background: '#fafafa'
                                            }}
                                            placeholder="class,jar,war,ear,zip,rar,tar,gz,bz2,7z,exe,dll,so"
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>

                            {/* 配置模板 */}
                            <div style={{
                                marginTop: '16px',
                                padding: '16px',
                                background: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
                                borderRadius: '12px',
                                border: '1px solid rgba(148, 163, 184, 0.2)'
                            }}>
                                <div style={{
                                    fontSize: '13px',
                                    fontWeight: '600',
                                    color: '#374151',
                                    marginBottom: '12px'
                                }}>
                                    快速配置模板
                                </div>
                                <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
                                    <Button
                                        type="link"
                                        size="small"
                                        onClick={() => setPmdTemplate('java')}
                                        style={{
                                            fontSize: '12px',
                                            padding: '4px 8px',
                                            height: 'auto',
                                            color: '#3b82f6'
                                        }}
                                    >
                                        Java项目模板
                                    </Button>
                                    <Button
                                        type="link"
                                        size="small"
                                        onClick={() => setPmdTemplate('frontend')}
                                        style={{
                                            fontSize: '12px',
                                            padding: '4px 8px',
                                            height: 'auto',
                                            color: '#3b82f6'
                                        }}
                                    >
                                        前端项目模板
                                    </Button>
                                    <Button
                                        type="link"
                                        size="small"
                                        onClick={() => setPmdTemplate('general')}
                                        style={{
                                            fontSize: '12px',
                                            padding: '4px 8px',
                                            height: 'auto',
                                            color: '#3b82f6'
                                        }}
                                    >
                                        通用项目模板
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </Card>
                </Form>
            </div>
        </div>
    );
};

export default UnitConfigPage; 